<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>easyCMS</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/resource/layuimini/lib/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/resource/layuimini/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
    <table class="layui-hide" id="listTable" lay-filter="listTable"></table>
  </div>
</div>
<script src="/resource/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script>
  let treeTable;
  let _where = [];
  let _height = 800;
  let _width = 800;
  layui.use(['form', 'table'], function () {
    treeTable = layui.treeTable;
    let $ = layui.jquery,
            form = layui.form,
            table = layui.table;
    _height = $(window).height();
    _width = $(window).width();
    let inst=treeTable.render({
      elem: '#listTable'
      ,url:'/admin/menu/menuListData',
      toolbar: '#toolbarDemo',
      defaultToolbar: false
      ,method:'post'
      ,page: false
      ,tree:{
        customName:{
          name:'title',
          pid:'pid',
          icon:''
        }
        ,data:{
          isSimpleData:true,
          rootPid:0
        }
      }
      ,cols: [[
        {field:'title',title: '名称',width:250}
        ,{field:'type',title:'类型',event:'type',width:100,templet:'#templType'}
        ,{field:'sort', title: '排序',event:'sort',width:70,config:{type:'input'}}
        ,{field:'href',title:'请求地址',event:'href',width:250}
        ,{field:'permits',width:250, title: '权限标识'}
        // ,{field:'createDate', title: '创建时间',event:'date',width:120}
        ,{field:'bar',title: "操作", width: "200", align: 'center', templet: '#bar1'}

      ]],done:function () {
        treeTable.expandAll('listTable', true);
      }
    });
    treeTable.on('tool(listTable)', function (obj) {
      let data = obj.data
      let layEvent = obj.event
      if (layEvent === 'edit') {
        parent.layer.open({
          type: 2,
          title: "修改菜单/按钮",
          area: ['900px', (_height-100)+'px'],
          content: '/admin/menu/menuEdit?id=' + data.id
        });
      }
      else if (layEvent === 'del') {
        parent.layer.confirm('确定删除该菜单吗？', {
          title: "删除该菜单",
          btn: ['确定', '取消']//按钮
        }, function (index) {
          $.post("/admin/menu/menuDelete", "id=" + data.id, function (data) {
            parent.layer.alert(data.msg,function (index) {
              if (data.code == 0) {
                treeTable.reload('listTable', {});
              }
              parent.layer.closeAll();
            });
          }, "json");
        });
      }
    });
    treeTable.on('toolbar(listTable)', function (obj) {
      let layEvent = obj.event
      if (layEvent === 'add') {
        parent.layer.open({
          type: 2,
          title: "增加菜单/按钮",
          area: ['900px', (_height-100)+'px'],
          content: '/admin/menu/menuAdd'
        });
      }

    });
  });
</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
  </div>
</script>
<script type="text/html" id="bar1">
  <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="del">删除</a>
</script>
<script type="text/html" id="templType">
  {{#  if(d.type == 1){ }}
  <a class="layui-btn layui-btn-xs layui-btn-normal">菜单</a>
  {{#  } else { }}
  <a class="layui-btn layui-btn-xs layui-btn-warm">按钮</a>
  {{#  } }}
</script>
</body>
</html>